import React, { PureComponent } from 'react';

// Header
function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
}

// Main
class Banner extends PureComponent {
  render() {
    console.log("Banner render函数被调用");
    return <h3>我是Banner组件</h3>
  }
}

function ProductList() {
  console.log("ProductList被调用");
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
      <li>商品列表4</li>
      <li>商品列表5</li>
    </ul>
  )
}

class Main extends PureComponent {
  render() {
    console.log("Main render函数被调用");
    return (
      <div>
        <Banner />
        <ProductList />
      </div>
    )
  }
}

// Footer
function Footer() {
  console.log("Footer被调用");
  return <h2>我是Footer组件</h2>
}


export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
      peoples: {
        peo: {
          name: 'GH'
        }
      }
    }
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log(nextProps, nextState);
  // }
  render() {
    console.log("App render函数被调用");
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <h2>当前成员:{this.state.peoples.peo.name}</h2>
        <button onClick={e => this.changeName()}>修改</button>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  changeName() {
    // this.state.peoples.peo.name = 'YZ'
    const p = JSON.parse(JSON.stringify(this.state.peoples))
    p.peo.name = "YZ"
    this.setState({
      peoples: p
    })
  }
}

// PureComponent 自己内部实现了一个浅比较的shouldComponentUpdate,当深层次对象的时候,改变了值但是内存地址一样
// 浅比价结果为true,React会认为没有修改,不会修改Dom,除非自己深拷贝一个。


